<template>
  <el-popover effect="light" trigger="hover" placement="top" width="auto">
    <template #default>{{ text }}</template>
    <template #reference>
      <el-icon class="action-button" size="16" @click="handleClick">
        <component :is="icon"></component>
      </el-icon>
    </template>
  </el-popover>
</template>

<script setup lang="ts">
const props = defineProps({
  // icon，暂只支持el-icon
  icon: {
    type: String,
    default: 'edit',
    required: true
  },
  text: {
    type: String,
    default: '按钮名称',
    required: true
  },
  clickFun: {
    type: Function,
    default: () => {
      return () => {
        console.log('点击回调')
      }
    }
  }
})
const handleClick = (param: any) => {
  props.clickFun && props.clickFun(param)
}
</script>

<style lang="scss" scoped>
.action-button {
  width: 26px;
  height: 26px;
  margin-right: 8px;
  background-color: #eee;
  border-radius: 20px;

  &:hover {
    color: #fff !important;
    background-color: #999;
  }
}
</style>
